<template>
    <div>
        <v-header title="我的客户">
            <div slot="left">
                <div class="backs_icon"></div>
            </div>
        </v-header>
        <div class="main_allScroll">
            <tab :line-width="1" style="position: relative;left: 0;" v-model="index01" prevent-default
                 @on-before-index-change="switchTabItem">
                <tab-item selected>会员({{number.memberNumber}})</tab-item>
                <tab-item>店主({{number.shopkeeperNumber}})</tab-item>
                <tab-item>仓主({{number.storehouseNumber}})</tab-item>
                <tab-item>推荐门店({{number.merchantNumber}})</tab-item>
            </tab>
            <div v-if="dataArr.length <=0" class="main_tab">
                <div class="noBusiness">
                    <div class="client_null_icon" style="margin-bottom: 0.75rem"></div>
                    <span>暂无相关客户</span>
                </div>
            </div>
            <div v-else class="main_tab">
                <scroller>
                    <ul class="main_c">
                        <li v-for="item in dataArr " :class="index01 == 3 ? 'recom_store' : ''">
                            <div class="li_l">
                                <img :src="item.headImgUrl && item.headImgUrl!= null?item.headImgUrl:loadingImg" alt="">
                            </div>
                            <div class="li_r" v-if="index01 == 3 ">
                                <p>{{item.memberName}}</p>
                                <div class="startText">店主: {{item.nickname}}</div>
                            </div>
                            <div class="li_r" v-else>
                                <p>{{item.nickname}}</p>
                                <div class="startText" v-html="item.start"></div>
                            </div>
                        </li>
                    </ul>

                </scroller>
            </div>
        </div>
    </div>
</template>

<script>
    import {Tab, TabItem} from 'vux'
    import {getMenber} from './js/index'
    export default {
        components: {
            Tab,
            TabItem,
        },
        name: 'client',
        data(){
            return{
                index01: 0,
                loadingImg: require("../../assets/img/avatar.png"),
                dataArr:[],
                number:{
                    memberNumber:0,
                    shopkeeperNumber:0,
                    storehouseNumber:0,
                }
            }
        },
        activated(){
            this.dataArr =[];
            this.number={
                memberNumber:0,
                    shopkeeperNumber:0,
                    storehouseNumber:0,
            };
            this.client();
            this.clientNumber();
        },
        methods:{
            switchTabItem(index) {
                this.index01 = index;
                this.dataArr =[];
                this.client();
                this.clientNumber();
            },
            clientNumber(){
                this.$ajax.inFo.clientNumber()
                    .then((res)=>{
                        this.number = res.body.content
                    })
            },
            client(){
                this.$ajax.inFo.client({type:this.index01 + 1})
                    .then((res)=>{
                        this.dataArr = [];
                        if(res.body.content && res.body.content != null){
                            res.body.content.forEach((v)=>{
                                v.start = getMenber(v.memberName)
                            })
                            this.dataArr = res.body.content;
                        }
                    })
            }
        },
    }
</script>
<style lang="less" scoped>
    .main_tab {
        top: 45px;
    }
    .main_c{
        li{
            background: #fff;
            border-bottom: 1px solid #efefef;
            display: flex;
            align-items: flex-start;
            align-content: center;
            padding: 0.2rem 0.3rem;
            .li_l{
                width: 1rem;
                height: 1rem;
                margin-right: 0.24rem;
                border-radius: 50%;
                overflow: hidden;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .li_r{
                padding-top: .1rem;
                p{
                    font-size: .3rem;
                    color: #333;
                    margin-bottom: .18rem;
                }
            }

        }
    }
    .startText{
        color: #666;
    }
    li.recom_store{
         .li_l{
            width: 1.36rem;
            height:1.36rem;
             border-radius: .1rem;
        }
    }
</style>